<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title>CSS样式</title>
        <meta name='keywords' content=''  />
        <meta name='description' content='' />
        <style>
            
            div{
                width:100px;height:100px;
                border:1px solid red;
            }
            div.c1{background-color:red;}
            div.c2{background-color:green;}
            div.c3{background-color:blue;
                   position:absolute;
                   width:70px;height:70px;
                   left:0px;top:0px;
            }
          
            
            /*
			绝对定位 position:absolute;
			1)让块元素不再独占一行
			2)脱离原来的文档流,后面的元素自动补上
			3)设置偏移量的时候,它的参考点:
			  a)长辈元素中,谁有定位属性,就参考谁,就近原则
			  b)都没有,就以html为参考点
			position的值: static(默认值)  relative  absolute  fixed
			具有定位属性是指, 元素的position值 是 relative 或者 absolute 或者 fixed

		*/
		/*
			一般的做法是:
			    1)将父元素设为 position:relative;  使父元素具有定位属性,且保持原位置不变
			    2)将子元素设为 position:absolute;  
                       同时设置left top 等偏移量.  使子元素参父元素为参考进行定位.

		*/
            div.c4{
                background-color:yellow;
                position:absolute;
            }
            div.c5{
                width:200px;height:200px;
                background-color:#ccc;
            }
            
            #xxoo{
                width:400px;height:400px;
                margin:0 auto;
                border:1px solid red;
                position:absolute;
                
            }
        </style>
    </head>
    <body>
        <h2>CSS样式实例:绝对定位</h2>
        <div id='xxoo'>
            <div class='c1'></div>
            <div class='c2'></div>
            <div class='c3'></div>
            <div class='c4'></div>
            <div class='c5'></div>
        </div> 
        
       
    </body>
</html>